<template>
  <footer class="footer">
    <div class="footer-inner pt-76px pb-23px my-0 mx-auto">
      <div class="footer-content flex justify-between">
        <img src="/logo/logo-white.png" alt="" class="w-131px h-42px" />
        <div class="flex">
          <section>
            <h5 class="section-title">平台链接</h5>
            <div class="links">
              <a
                v-for="link in linkList"
                :key="link.id"
                :href="link.openUrl"
                target="_blank"
                >{{ link.linkTitle }}</a
              >
            </div>
          </section>
          <section>
            <h5 class="section-title">快速链接</h5>
            <div class="links">
              <router-link to="/supply">供需信息</router-link>
              <router-link to="/model/square">模型广场</router-link>
              <router-link to="/dataSource">数据集</router-link>
              <router-link to="/news">行业资讯</router-link>
              <router-link to="/about">关于我们</router-link>
            </div>
          </section>
          <section>
            <h5 class="section-title">服务咨询</h5>
            <div class="fw-600 font-size-24px lh-30px mb-32px">
              service@slquan.com
            </div>
            <div class="flex">
              <div v-for="code in codeList" :key="code.id" class="mr-36px">
                <img class="w-100px h-100px" :src="code.linkPicUrl" alt="" />
                <h6>{{ code.linkTitle }}</h6>
              </div>
            </div>
          </section>
        </div>
      </div>
      <div class="footer-bottom font-size-12px lh-30px mt-70px">
        Copyright 2003-2020 四川浮点运算科技有限公司
      </div>
    </div>
  </footer>
</template>

<script setup>
import { useConfigStore } from "@/store";

const configStore = useConfigStore();

const linkList = computed(
  () => configStore.configList?.linkList.slice(0, 6) || []
);
const codeList = computed(
  () => configStore.configList?.codeList.slice(0, 2) || []
);
</script>

<style lang="less" scoped>
.footer {
  color: #fff;
  background: #18202f;
  &-inner {
    width: @content-width;
  }
  &-bottom {
    color: @text-lighter;
  }
  section {
    margin-left: 120px;
    .section-title {
      font-size: 18px;
      font-weight: 500;
      line-height: 30px;
      margin-bottom: 24px;
    }
    .links {
      display: flex;
      flex-direction: column;
      a {
        color: @text-lighter;
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 12px;
        transition: all 0.1s linear;
        &:hover {
          color: @link-color;
        }
      }
    }
    h6 {
      color: @text-lighter;
      font-size: 12px;
      line-height: 38px;
      text-align: center;
    }
  }
}
</style>
